<template>
  <div class="app-container" v-loading="loading">
    <el-row type="flex" style="justify-content: space-between">
      <div style="flex: 1; min-width: 0; margin-right: 5px">
        <leaseContract state="detail" v-model="form.replacementCar" />
        <carReplacementService state="detail" v-model="form.replacementCar" />
        <vehicleInformationZD state="detail" v-model="form.replacementCar" />
        <storage-out-inventory-info :value="form" v-if="form.carOutStorage"></storage-out-inventory-info>
      </div>
      <FlowRecord v-if="flowId" :id="flowId" :customStyle="{ minWidth: '280px', maxWidth: '300px', marginBottom: '20px' }" />
    </el-row>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import StorageOutInventoryInfo from '@/views/carInventory/components/StorageOutInventoryInfo.vue'
import * as outInventoryApi from '@/api/carInventory/outInventory'
import leaseContract from '@/views/carInventory/components/leaseContract.vue'
import carReplacementService from '@/views/vehicleOrder/suborderManagement/components/carReplacementService.vue'
import vehicleInformationZD from '@/views/vehicleOrder/suborderManagement/components/vehicleInformationZD.vue'
export default {
  name: 'DetailTch',
  components: { StorageOutInventoryInfo, leaseContract, carReplacementService, vehicleInformationZD },
  props: {},
  data() {
    return {
      form: { carOutStorage: { purchaseSource: null }, replacementCar: {} },
      flowId: null,
      loading: false,
    }
  },
  computed: {},
  methods: {
    // 获取入库单详情
    getDetail() {
      this.loading = true
      outInventoryApi.replacementCarOutStorage(this.$route.query.orderId).then((res) => {
        this.loading = false
        this.flowId = res.data?.carInStorage?.flowId
        // this.flowId = '4085105'
        this.form = {
          ...res.data,
          replacementCar: {
            ...res?.data?.replacementCar,
          },
          carOutStorage: {
            ...res?.data?.carOutStorage,
          },
        }
      })
    },
    back() {
      this._toPage({
        name: 'OutInventoryList',
      })
    },
  },
  mounted() {
    this.getDetail()
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
